import React, { Component } from 'react';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import styles from './feedBack.less';
import { Table, Input, Button, Icon, DatePicker, Select } from 'antd';

@connect(({ feedBack }) => ({
  feedBackData: feedBack.feedBackData,
}))
class feedBack extends Component {
  state = {
    keyword: '',
    api_type: '',
    start_time: '',
    end_time: '',
    sort: 'desc',
    page_num: 1,
    page_size: 20,
    listData: {
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          render: (text, record, index) => <span> {index + 1} </span>,
        },
        {
          title: '回复',
          dataIndex: 'company_relpy_title',
          key: 'company_relpy_title',
          render: (company_relpy_title, record) => (
            <span>
              <a
                href={
                  record.company_reply_url == '' ? record.company_reply_url : 'javascript:void(0)'
                }
                target="_blank"
                style={{ color: '#1d5bc2' }}
              >
                {company_relpy_title}
              </a>
            </span>
          ),
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          render: (title, record) => (
            <span>
              <a href={record.company_reply_url} target="_blank" style={{ color: '#1d5bc2' }}>
                {title}
              </a>
            </span>
          ),
        },
        {
          title: '日期',
          dataIndex: 'published_time',
          key: 'published_time',
        },
        {
          title: '监管分类',
          dataIndex: 'source',
          key: 'source',
        },
      ],
    },
  };

  queryData(that) {
    const { dispatch } = that.props;
    dispatch({
      type: 'feedBack/getFeedBack',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
        keyword: that.state.keyword,
        api_type: that.state.api_type,
        start_time: that.state.start_time,
        end_time: that.state.end_time,
        sort: that.state.sort,
        page_num: that.state.page_num,
        page_size: that.state.page_size,
      },
    });
  }

  componentDidMount() {
    // const { dispatch } = this.props;
    this.queryData(this);
  }

  render() {
    let { feedBackData, dispatch } = this.props;
    let pager;

    console.log(feedBackData);
    if (feedBackData) {
      pager = {
        total: feedBackData.total_count,
        current: this.state.page_num,
        pageSize: this.state.page_size,
        onChange: page => {
          this.setState({ page_num: page }, () => {
            this.queryData(this);
          });
        },
      };
    }

    let renderList = () => {
      let result = [];

      if (feedBackData) {
        result.push(
          <Table
            rowClassName={(record, index) => {
              return 'zebra-table-row';
            }}
            columns={this.state.listData.columns}
            dataSource={feedBackData.data_list}
            pagination={pager}
          />
        );
      }
      return result;
    };

    let clearQuery = () => {
      this.setState(
        {
          page_num: 1,
          keyword: '',
          api_type: '',
          start_time: '',
          end_time: '',
        },
        () => {
          this.queryData(this);
        }
      );
    };

    return (
      <div className={styles.childPageWrap}>
        <div className={styles.queryWrap}>
          <div className={styles.queryRow}>
            <label>
              <span>标准关键字筛选：</span>
              <Input
                placeholder="请输入关键字"
                onChange={val => {
                  this.setState({ keyword: val });
                }}
                style={{ width: '150px' }}
              />
            </label>

            <label>
              <span>监管分类：</span>
              <Select
                style={{ width: '150px' }}
                showSearch
                placeholder="监管分类"
                onChange={val => {
                  this.setState({ api_type: val });
                }}
              >
                <Option value="">全部</Option>
                <Option value="IPO监管反馈">IPO监管反馈</Option>
                <Option value="并购重组反馈">并购重组反馈</Option>
                <Option value="上交所问询">上交所问询</Option>
                <Option value="深交所问询">深交所问询</Option>
              </Select>
            </label>

            <label>
              <span>发函日期：</span>
              <DatePicker
                style={{ width: '175px' }}
                format="YYYY-MM-DD"
                placeholder="开始日期"
                onChange={(val, dateString) => {
                  this.setState({ start_time: dateString });
                }}
              />
              <font style={{ margin: '0 8px' }}>至</font>
              <DatePicker
                style={{ width: '175px' }}
                format="YYYY-MM-DD"
                placeholder="结束日期"
                onChange={(val, dateString) => {
                  this.setState({ end_time: dateString });
                }}
              />
            </label>
          </div>

          <div className={styles.queryRow} style={{ justifyContent: 'center' }}>
            <Button
              type="primary"
              onClick={() => this.queryData(this)}
              style={{ marginRight: '20px' }}
            >
              查询
            </Button>
          </div>
        </div>
        {renderList()}
      </div>
    );
  }
}

export default feedBack;
